<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			#div1{
				width:850px;
				height:500px;
				margin:100px auto;
				position: relative;
				overflow: hidden;
			}
			#div1 ul{
				display: flex;
				position: absolute;
				left: 0;
				top: 0;
			}
			#div1 ul li{
				height:500px;
			}
			#div1 ol{
				position: absolute;
				right: 10%;
				bottom: 10px;
				z-index:5;
			}
			#div1 ol li{
				width:20px;
				height:20px;
				background-color: aquamarine;
				margin-left: 5px;
				float: left;
				line-height: 20px;
				text-align: center;
				border-radius: 50%;
			}
			#div1 ol li.ac{
				background:red;
				color:#fff;
			}
			#div1>a{
				text-decoration: none;
				position: absolute;
				top:50%;
				margin-top:-10;
				height:40px;
				line-height: 32px;
				text-align: center;
				width:30px;
				font-size: 40px;
				/* vertical-align: middle; */
				color:#fff;
				background: rgba(0,0,0,0.5);
				z-index:5;
			}
			#div1 .goPrev{
				left:0;
			}
			#div1 .goNext{
				right:0;
			}
			img{
				width:850px;
				height:500px;
			}
		</style>
	</head>
	<script src="js/jquery-3.5.1.min.js"></script>
	<body>
		<div id="div1">
			<ul>
				<li><img src="img/1.jpg"></li>
				<li><img src="img/2.jpg"></li>
				<li><img src="img/3.jpg"></li>
				<li><img src="img/4.jpg"></li>
				<li><img src="img/5.jpg"></li>
			</ul>
		 <ol>
		  </ol>
		  <a href="javascript:;" class="goPrev">&laquo;</a>
		  <a href="javascript:;" class="goNext">&raquo;</a>
		</div>
		<script>
			class Carousel{
			constructor(selector){
				this.$box=$(selector)
				this.$ul=this.$box.children('ul')
				this.$ol=this.$box.children('ol')
				this.$imgs=this.$ul.children()
				this.$goPrev=this.$box.children('.goPrev')
				this.$goNext=this.$box.children('.goNext')
				
				this.len=this.$imgs.length
				this.width=this.$imgs.outerWidth()
				this.index=0
				this.lastIndex=0
				
				this.init()
				this.btnsClick()
				this.nextChange()
				this.prevChange()
				this.auto()
			}
			init(){
				for(var i=0;i<this.len;i++){
					$('<li>').html(i+1).addClass(i===0?'ac':'').appendTo(this.$ol)
				}
				this.$btns=this.$ol.children()
				this.$imgs.eq(0).clone().appendTo(this.$ul)
				this.$ul.width(this.width*(this.len+1))
			}
			btnsClick () {
			   // this是当前按钮
			   // _this外层对象
			  const _this = this
			  this.$btns.on('click', function () {
			    _this.lastIndex = _this.index
			    _this.index = $(this).index()
			    $(this).addClass('ac').siblings().removeClass('ac')
			    _this.$ul.animate({ left: -_this.index * _this.width })
			  })
			}
			nextChange(){
				this.$goNext.on('click',()=>{
					this.lastIndex=this.index
					this.index++
					if(this.index===this.len){
						this.index=0
						this.$ul.animate({left:-this.len*this.width},()=>{
							this.$ul.css('left',0)
						})
					}else{
						this.$ul.animate({left:-this.index*this.width})
					}
				this.$btns.eq(this.index).addClass('ac').siblings().removeClass('ac')
				})
			}
			prevChange(){
				this.$goPrev.on('click',()=>{
					this.lastIndex=this.index
					this.index--
					if(this.index<0){
						this.index=this.len-1
						this.$ul.css('left',-this.len*this.width)
					}
					this.$ul.animate({left:-this.index*this.width})
					this.$btns.eq(this.index).addClass('ac').siblings().removeClass('ac')
				})
			}
			auto(){
				this.play()
				this.$box.hover(()=>{
					clearInterval(this.timer)
				},()=>{
					this.play()
				})
			}
			play(){
				this.timer=setInterval(()=>{
					this.$goNext.trigger('click')
				},2000)
			}
			}
			new Carousel('#div1')
		</script>
	</body>
</html>
